<template>
	

	<view class="content an-index ">
			<view class="pB30">
				   
				<view class="details-message" v-if="detaildata.appointment_details">
					<p class="bold pB5" v-if="detaildata.appointment_details.vister_name">访客信息</p>
					<view class="bg_white" v-if="detaildata.appointment_details.vister_name">
						<scroll-view  class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
							<div class="jin-frist" v-if="detaildata.appointment_details">
								<image style="width: 100%;border-radius: 100%; height: 100%; bobackground-color: #eeeeee;" mode="aspectFill" :src="detaildata.appointment_details.vister_personimg | personimg" @error="imageError"></image>
							</div>
							<div class="jin-second">
								<image style="width: 100%;border-radius: 100%; height: 100%; bobackground-color: #eeeeee;" mode="aspectFill" :src="userSrc" @error="imageError"></image>
							</div>
					   
						</scroll-view>
					</view>
					
					<view class="details-message details-messagenew" v-if="detaildata.appointment_details.vister_name">					
						<view class="details-message-name">访客姓名：{{detaildata.appointment_details.vister_name}}</view>
						<view class="details-message-sex">访客性别：{{detaildata.appointment_details.vister_sex==1?'男':'女'}}</view>
						<view class="details-message-number" v-if="detaildata.appointment_details.vister_identitycard | isidcard">身份证号：{{detaildata.appointment_details.vister_identitycard | isidcard}}</view>
						<view class="details-message-phone">手机号码：{{detaildata.appointment_details.vister_mobile}}</view>
						<view class="details-message-phone" v-if="detaildata.appointment_details.carnumber">车牌号码：{{detaildata.appointment_details.carnumber}}</view>
						<view class="details-message-sex" >来访原由：{{ detaildata.appointment_details.app_reson }}111{{detaildata.appointment_details.is_completeperson}}</view>
						
						<!-- <view class="details-message-sex" v-if="detaildata.appointment_details.meeting_reson ">不接受缘由：{{ detaildata.appointment_details.meeting_reson }}</view> -->
					
					</view>
					
					<p class="bold pB5 pT10">邀请详情</p>
					<view class="details-message-number" v-if="detaildata.appointment_details">邀请公司：{{ detaildata.appointment_details.app_company_name }}</view>
					<view class="details-message-number">邀请部门：{{ detaildata.appointment_details.address }}</view>
					<view class="details-message-sex" >邀请人员：{{ company }}</view>
					<view class="details-message-phone">手机号码：{{ mobile }}</view>
					<view class="details-message-name">到访开始：{{visittime}}</view>
					<view class="details-message-name" v-if="visittime2">到访结束：{{visittime2}}</view>
					<view class="details-message-name" v-if="!detaildata.appointment_details.vister_name&&detaildata.appointment_details.visit_name">访客姓名：{{detaildata.appointment_details.visit_name}}</view>
					
					<view class="details-message-sex" v-if="!detaildata.appointment_details.vister_name">来访原由：{{ detaildata.appointment_details.app_reson }}</view>
					<view class="details-message-sex" v-if="detaildata.appointment_details.is_completeperson==1">注册方式：简易注册</view>
					<view class="details-message-sex" v-if="detaildata.appointment_details.is_completeperson==2">注册方式：完整注册</view>
					<!-- <view class="details-message-sex" v-if="!detaildata.meetinginfo" >来访缘由：{{ detaildata.appointment_details.app_reson }}</view> -->
					<!-- <view class="details-message-number">访问信息:{{detaildata.status==1?'已完成访问':(detaildata.status==0?'未完成':(detaildata.status==2?'已逾期':(detaildata.status==4?'已暂停':'已完成访问')))}}</view> -->
					
					<!-- <view class="details-message-number" v-if="detaildata.appointment_details.meeting_status==1">状态:访客不接受</view> -->
					<!-- <view class="details-message-number" v-if="detaildata.refuseremark">不来理由:{{detaildata.refuseremark}}</view>
					<view class="details-message-number" v-if="detaildata.remark">备注:{{detaildata.remark?detaildata.remark:'-'}}{{showm_status(detaildata.appointment_details.m_status)}}</view> -->
					
						<p class="bold pB5 pT10" v-if="time_streamlist.length != 0">邀请动态</p>
						<view class="details-message-number" v-if="time_streamlist.length != 0" >到访状态：{{detaildata.appointment_details.m_tips}}</view>
						<view class="details-message-number statusInformation" v-if="time_streamlist.length != 0" style="padding-top:12rpx">
							<div  v-if="time_streamlist.length != 0">
								<div class="status-information pB5 flex" v-for="item in time_streamlist" :class="item.type=='2'?'statusEND':''" v-if="item.tips=='提交时间' || item.tips=='受访人员' || item.tips=='访客确认' || item.tips=='访客姓名' || item.tips=='取消原因' || item.tips=='查看时间'">
									<div class="left">{{item.tips}}：</div>	
									<div class="right">{{item.value}}</div>
								</div>
							</div>	
						</view>
						<p class="bold pB5 pT10" v-if="time_streamlist[7]">来访动态</p>
						<!-- <view class="details-message-number" v-if="time_streamlist[7].tips=='保安扫码' || time_streamlist[6].tips=='保安扫码'" >到访状态：{{detaildata.appointment_details.m_tips}}</view> -->
						<view class="details-message-number statusInformation" v-if="time_streamlist[7]">
							<div  v-if="time_streamlist.length != 0">
								<div class="status-information pB5 flex" v-for="item in time_streamlist" :class="item.type=='2'?'statusEND':''" v-if="item.tips=='保安扫码' || item.tips=='保安人员' || item.tips=='确认离开'">
									<div class="left">{{item.tips}}：</div>	
									<div class="right">{{item.value}}</div>
								</div>
							</div>	
						</view>
				
							<p class="bold pB5 pT10" v-if="detaildata.appointment_details.healthy_img">点击查看该访客粤康码图片</p>
							<view class="details-message-number"  style="padding: 7px;" v-if="detaildata.appointment_details.healthy_img">									
									<view class="user-imgshow" @click="previewImg(detaildata.appointment_details.healthy_img)">
										<image  :src="detaildata.appointment_details.healthy_img" style="width: 200upx; height: 200upx; background-color:  #ebebeb;"/>
									</view>
							</view>
							<p class="bold pB5 pT10" v-if="time_streamlist[10]">到访动态</p>
						<!-- 	<view class="details-message-number" v-if="time_streamlist[10]" >到访状态：{{detaildata.appointment_details.m_tips}}</view> -->
							<view class="details-message-number statusInformation" v-if="time_streamlist[9]">
								<div  v-if="time_streamlist.length != 0">
									<div class="status-information pB5 flex" v-for="item in time_streamlist" :class="item.type=='2'?'statusEND':''" v-if="item.tips=='扫码接待' || item.tips=='接待人员' || item.tips=='接待完成'">
										<div class="left">{{item.tips}}：</div>	
										<div class="right">{{item.value}}</div>
									</div>
								</div>	
							</view>
	
				</view>	
			</view>
			<view class="uni-flex uni-row w90 mauto pT10 pB100ux uniflexnew" v-if="btnallshow" style="margin-bottom: -100upx;margin-top: -20px;">
			<view class="return" @click="modify()" v-if="detaildata.status == 0&&detaildata.appointment_details.m_status==0">
				修改
			</view>				
			<view v-if="xcodechanger" class="xqrcode" @click="returnCode">
				出示二维码
			</view>
			<view class="return returnshare" v-if="sharebtn&&detaildata.appointment_details.m_status==0" @click="showshare()" >
				分享
			</view>	
			<view class="return returnbg" @click="del(detaildata.id,detaildata)" v-if="detaildata.status == 0&&detaildata.appointment_details.m_status==0">
				删除
			</view> 
			<view class="return" @click="returnPage">
				返回
			</view>
			<view class="return" @click="refuse" style="background-color:red;" v-if="detaildata.appointment_details.m_status==7  && detaildata.appointment_details.arrive_status <=1">
				取消预约
			</view>
			</view>
			<view class="tCenter f16" v-if="controlchanger" style="margin-bottom:40px;">
				<view class="f16" v-html="usershowtext"></view>
			</view>
			<view class="w100 tRight sharewindow" v-if="sharein" @click="hideshare()">
				<img class="w60 pR10" src="../../static/img/share.png" ></img>
			</view>
			<!-- 底部导航 -->
			<footernav pagePath='user'></footernav>
			<!-- 加载动画 -->
			<loading v-if="!isloading()"></loading>
		</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { hostRoot, img } from '@/common/util.js';
import request from '../../common/vmeitime-http/requstx.js'; //引进requst方法
import defaultImg from '@/static/img/userImg.jpg';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import  {appointmentinfo,appointmentdelete,appointmentltime} from '@/common/api/appointment.js';
import {userinfo} from '@/common/api/user.js'
// #ifdef H5 
import {wexinshare} from '@/common/wechatshare.js';
import {appointmentrefuse,arrivearrive_info} from '../../common/api/appointment.js'; 
// #endif
// var jweixin = require('../../components/jweixin-module/index.js');
export default {
	components: { uniIcons },
	
	data() {
		return {
			sharein:false,
			token:'',
			mid:'',
			userSrc: '',
			grids: [],
			user_name: '',
			company: '',
			visittime: '',
			visittime2: '',
			reson: '',
			remark: '',
			mobile: '',
			address: '',
			id: '',
			appId: '',
			timestamp: '',
			nonceStr: '',
			signature: '',
			banner:"",
			scrollTop: 0,
			qxyq:5,
			old: {
			    scrollTop: 0
			},
			xcodechanger:false,
			xcode:'',
			sharebtn:false,
			detaildata:"",
			userinfodata:"",
			btnallshow:true,
			listbtn:'',
			usershowtext: '',
			controlchanger: true,
			time_streamlist:[],
			detaildata:{
				appointment_details:{
					m_status:'',
				}
			},
		};
	},
	
	onLoad(event) {
		let that=this;
		console.log(event)
		try {
			this.banner = JSON.parse(decodeURIComponent(event.detailDate));
			console.log(event.meeting_code)
			if(event.meeting_code){
				this.xcodechanger = true
				this.xcode = event.meeting_code
			}
			if(event.listbtn){
				
				this.listbtn = event.listbtn
			}
			
			console.log(this.banner);
		} catch (error) {
			this.banner = JSON.parse(event.detailDate);
			console.log(this.banner);
		}
		this.id = this.banner.id;
		
		if(this.banner.status=='0'&&event.sharebtn=='YES'){
			this.sharebtn=true;
		}else{
			this.sharebtn=false;
		}
		
		if(event.sharetype=='shareYES'){
			this.showshare();
		}
		let detail = {
			id: this.banner.id
		};
		
		appointmentinfo({'id': this.banner.id}).then(res=>{
			console.log(res)
			/*success*/
			if (res.data.code == 400) {
				uni.showModal({
					title: '',
					content:res.data.message,						
					showCancel:false,
					confirmText: "确定",
					success: function (res) {
						if (res.confirm) {
							uni.reLaunch({
								url: '/pages/user/user'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});	
			    return;
			}
			
			if(res.data){
				this.user_name = res.data.uname;
				this.company = res.data.data.uname;
				this.visittime = res.data.data.visittime;
				this.visittime2 = res.data.data.endvisittime;
				
				this.reson = res.data.data.app_reson;
				this.remark = res.data.data.remark;
				this.mobile = res.data.data.mobile;
				this.address = res.data.data.company_name;
				this.userSrc =  res.data.data.headimgurl;
				this.detaildata=res.data.data;
				this.mid=res.data.data.appointment_details.meeting_id;
				console.log("mmmid",this.mid)
				if(res.data.data.time_stream){
					console.log(res.data.data.time_stream)
					this.time_streamlist=res.data.data.time_stream;
				}
				uni.getStorage({
					key: 'token',
					success: (res) => {
						console.log(res.data);
						that.token = res.data;
						}
				});		
				if(this.detaildata.appointment_details.m_status == 7 && this.detaildata.appointment_details.m_tips == "待访问" || this.detaildata.appointment_details.m_status == 13 && this.detaildata.appointment_details.m_tips == "访客答题中"){
				appointmentltime({'token':that.token,'mid':this.mid}).then(res=>{
						console.log(res)
					});
				}
			}
			if (this.detaildata.appointment_details.m_status == 0) {
				this.controlchanger = false;
			} else if (this.detaildata.appointment_details.m_status == 1) {
				// var text='您正在访问...';
				var text = '访客已完成本次来访<br>';
				this.controlchanger = true;
				this.usershowtext = text;
				return;
			} else if (this.detaildata.appointment_details.m_status == 2) {
				var text = '本次到访时间已过期<br>';
				this.controlchanger = true;
				this.usershowtext = text;
				return;
			
			} else if (this.detaildata.appointment_details.m_status == 12) {
				var text = '访客不同意到访<br>';
				this.controlchanger = true;
				this.usershowtext = text;
				return;
			
			} else if (this.detaildata.appointment_details.m_status == 3) {
				var text = '本次邀请已过期<br>';
				this.controlchanger = true;
				this.usershowtext = text;
				return;
			
			} else if (this.detaildata.appointment_details.m_status == 4) {
				var text = '已暂停本次邀请<br>';
				this.controlchanger = true;
				this.usershowtext = text;
				return;
			
			} else if (this.detaildata.appointment_details.m_status == 9) {
				var text = '访客不接受本次邀请<br>';
				this.controlchanger = true;
				this.usershowtext = text;
				return;
			} else if (this.detaildata.appointment_details.m_status == 6) {
				// var text='您已经接受本次邀请<br>请如期安排。';
				var text = '您已经接受邀请<br>请等待受访人确认';
				this.controlchanger = true;
				this.usershowtext = text;
				return;
			}	
			else if(this.appointmentDetails.m_status == 7 &&this.appointmentDetails.m_tips == "访问中") {
				var text = '访客已完成访问<br>请访客扫码签离';
				// var text='您已经接受邀请<br>请等待受访人确认';
				this.controlchanger = true;
				this.usershowtext = text;
				return;
			} 
			else if(this.appointmentDetails.m_status == 7 &&this.appointmentDetails.m_tips == "保安放行") {
				var text = '访客已进入公司<br>请准备与访客会面';
				// var text='您已经接受邀请<br>请等待受访人确认';
				this.controlchanger = true;
				this.usershowtext = text;
				return;
			} 
			else if(this.appointmentDetails.m_status == 7 &&this.appointmentDetails.m_tips == "待离开") {
				var text = '访客已完成访问<br>等待访客离开公司';
				// var text='您已经接受邀请<br>请等待受访人确认';
				this.controlchanger = true;
				this.usershowtext = text;
				return;
				
			}else if(this.detaildata.appointment_details.m_status == 7) {
				var text = '请等待访客的来访<br>请您如期安排。';
				// var text='您已经接受邀请<br>请等待受访人确认';
				this.controlchanger = true;
				this.usershowtext = text;
				return;
			} else if (this.detaildata.appointment_details.m_status == 8) {
				var text = '您的修改已发送给受访人<br>请等待确认';
				this.controlchanger = true;
				this.usershowtext = text;
				return;
			} else if (this.detaildata.appointment_details.m_status == 5 && this.detaildata.appointment_details.arrive_status == 5) {
					var text = '保安不同意访客进入</br>请及时联系受访人';
					this.controlchanger = true;
					this.usershowtext = text;
					return;
			
			} else if (this.detaildata.appointment_details.m_status == 5) {
				var text = '您已取消本次邀请';
				this.controlchanger = true;
				this.usershowtext = text;
				return;
			} else if (this.detaildata.appointment_details.m_status == 10) {
				var text = '您的修改已发送给受访人<br>请等待确认';
				this.controlchanger = true;
				this.usershowtext = text;
				return;
			} else if (this.detaildata.appointment_details.m_status == 11) {
				var text = '您已经接受邀请<br>请等待受访人确认';
				this.controlchanger = true;
				this.usershowtext = text;
				return;
			} else if (this.detaildata.appointment_details.m_status == 13) {
				var text = '访客在请进行相关答题中';
				this.controlchanger = true;
				this.usershowtext = text;
				return;
			} 
			 userinfo({}).then(resuser=>{//获取用户信息
			 	this.userinfodata=resuser.data.data;
			 	if(this.userinfodata.id==this.detaildata.uid){
			 		this.btnallshow=true;
			 	}else{
			 		this.btnallshow=false;
			 	}	
				// 生成分享
				// +'&sharecode='+this.userinfodata.sharecode
				let username=uni.getStorageSync('username');
				var title="访客邀请函";
				let desccontent=res.data.data.company_name+resuser.data.data.name+"邀请您";
				var url=this.weixinhttpurl+'/#/pages/yaoqing/fangxiang?detailDate=' + encodeURIComponent(JSON.stringify(detail));
				// var img='https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2267186809,1206764244&fm=26&gp=0.jpg';
				var sharedata={
					title:title,
					desc:desccontent,
					img:this.sharehttpurl+'/static/images/shareimg.jpg?',
					link:url
				}
				wexinshare(sharedata)//微信分享
				
			 })
			 
			
		})
		// this.visittime = this.banner.visittime;
		// this.reson = this.banner.reson;
		// this.remark = this.banner.remark;
		// this.address = this.banner.address;
		
		// uni.getStorage({
		// 	key: 'headimgurl',
		// 	success: res => {
		// 		this.userSrc = res.data;
			
		// 	},
		// 	fail:res =>{
		// 		this.userSrc = '../../static/img/head_bg.png'
		// 	}
		// });
		
			
			// }
		
	},
	
	methods: {
		refuse(){
			// let that=this
			// uni.showModal({
			//     title: '是否取消预约?',		
			//     success: function (res) {
			//         if (res.confirm) {
			// 			uni.showToast({
			// 				icon:'loading',
			// 				title: '等待处理中...',
			// 			});
			// 				appointmentrefuse({type:'cvis',refusereson:"受访人取消预约",id:that.detaildata.id}).then(res=>{
			// 					uni.showToast({
			// 						title: '取消预约成功',
			// 					});
			// 					console.log(res);
			// 					uni.navigateTo({
			// 						url:'./yaoqinglist'
			// 					})
			// 				})
						
			// 			}else{
							
			// 				}
			// 			},
			// 	});
			uni.navigateTo({
				url: '/pages/yaoqing/invitationRefuse?id='+this.detaildata.id+'&choosetype=cvis&skipstate=c_adu&type=1',
			});
		},
		previewImg(logourl) {
		
			if(logourl){
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = logourl
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			}
		},
		showdata(){
		
			
		},
		backRefresh(type){ //返回刷新带参数
			console.log(type)
			this.page=1;
			this.showdata()
		},
		modify(index){
			uni.navigateTo({
				url: './invitationModification'+'?detailDate='+JSON.stringify(this.detaildata)
			});
		},
		del(id,item){
			console.log(item)
			
			/*请求*/
			let  _that = this
			uni.showModal({
			    title: '确定删除此邀请?',
			    success: function (res) {
			        if (res.confirm) {
						appointmentdelete({'id':id}).then(res=>{
							if(res.data.code==200){
								uni.showToast({
								    title: '成功删除',
								    duration: 2000
								});
								if(_that.listbtn=='YES'){
									_that.page=1;
									_that.backrefresh('123')	
								}else{
									uni.reLaunch({
										url: '/pages/yaoqing/yaoqinglist'
									});
								}
								
							}
						})
			            // console.log('用户点击确定');
			        } else if (res.cancel) {
						return 
			            // console.log('用户点击取消');
			        }
			    }
			});
		
			
		},
		showshare(){
			uni.showToast({
			    title:  '点击右上角进行分享',
			    duration: 2000,
				icon:'none'
			});
			this.sharein=true;	
		},
		
		scroll(e) {
		    console.log(e)
		    this.old.scrollTop = e.detail.scrollTop
		},
		hideshare(){
			this.sharein=false;
		},
		onNavigationBarButtonTap: function(e) {
			if(this.banner.status=='1'){
				uni.showToast({
				    title:  '邀请已过期，不能再分享',
				    duration: 2000,
					icon:'none'
				});
				
				return;
			}
			uni.showToast({
			    title:  '点击右上角进行分享',
			    duration: 2000,
				icon:'none'
			});
			this.sharein=true;
			// uni.reLaunch({
			// 	url: './fangxiang'
			// });
		},
		returnPage(){
			// setTimeout(()=>{
				
				if(this.listbtn=='YES'){
					this.page=1;
					this.backrefresh('123')	
				}else{
					uni.reLaunch({
						url: '/pages/yaoqing/yaoqinglist'
					});
				}
				
			// },1000)
			
			// this.backrefresh('123')	
		},
		returnCode(){
			uni.navigateTo({
				url: '/pages/yaoqing/InviteQrCode?meeting_code='+this.xcode
			});
		}
	}
};
</script>

<style lang="scss">
	
	.details-message {
		width: 95%;
		margin: auto;
		uni-view {
			margin: 0px 0;
			padding: 10px;
			background-color: #fff;
			border-bottom: 1px solid #eee;
		}
		.details-messagenew{padding: 0;width: 100%;}
	}
	
	
	.content{
		background-color: white;
	}
.scroll-view_H{
	height: 180upx;
}
.an-index {
	padding: 15px 0px;
	background-color: #efeff4;
	// background: #fefefe url(../../static/img/head_bg.png) no-repeat;
	background-size: 100% auto;
}

.an-head-nav {
	padding: 40upx 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;

	.title {
		font-size: 18px;
		padding-left: 10px;
	}

	.btn {
		font-size: 18px;
		padding: 0 8px;
	}
}
.content {
	display: flex;
	flex: 1;
	flex-direction: column;
	
}

.swiper-item {
	height: 100%;
}

.an-index-grid {
	display: flex;
	flex-direction: row; //主轴方向
	flex-wrap: wrap; //换行
	justify-content: space-between; //主轴上的对齐方式
	width: 70%;
}

.an-index-box {
	flex: 0 1 41%; //flex-grow, flex-shrink 和 flex-basis的简写
	//flex-grow: 0;	//等分剩余空间
	//flex-shrink: 1;	//等比例缩小
	//flex-basis: 48%;	//占据的主轴空间
	height: 50px;
	line-height: initial;
	color: #ffffff;
	margin-bottom: 20px;
	border-radius: 10px;
	box-shadow: 0px 10px 8px #e8e8e8;

	.an-head-tile {
		//交叉轴对齐方式
		text-align: center;
	}
}

.an-body-cont {
	margin-top: 5px;
}

.box-color2 {
	background: linear-gradient(to bottom right, #8f8f94, #888);
}

.box-color1 {
	background: linear-gradient(to bottom right, #007aff, #007aff);
}

.jin {
	position: relative;
}

.jin-frist {
	background: #bebebe;
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	left: 0;
	color: white;
	text-align: center;
	width: 80px;
	height: 80px;
	margin: 0 auto;
	border-radius: 80px;
	box-shadow: 0px 10px 8px #e8e8e8;
}

.title-first {
	font-size: 17px;
	margin-top: 50px;
}

.title-first1 {
	font-size: 17px;
	margin-top: 5px;
}

.qiun-charts {
	width: 100%;
	height: 500upx;
	background-color: #ffffff;
}

.charts {
	width: 100%;
	height: 500upx;
	background-color: #ffffff;
}
.return,.xqrcode{
		width: 140upx;
		height: 32px;
		color: rgba(255, 255, 255, 1);
		background-color: rgba(42, 130, 228, 1);
		border-radius: 8px;
		font-size: 15px;
		line-height: 32px;
		text-align: center;		
		margin: 0 5px;
}
.xqrcode{
	background-color: rgba(42, 130, 228, 1);
}
body{
		background: white;
	}
.yaoqing {
	margin-top: 20px;
	text-align: center;
}
.uniflexnew{
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}
</style>
<style scoped>
	.sharewindow{position:fixed;z-index: 999; top: 0px;right: 0;height: 100%;background-color: rgba(0,0,0,0.4);}
	.returnbg{
		background-color: rgba(212, 48, 48, 1);
	}
	.returnshare{background-color: rgba(0, 170, 0, 1.0);}
</style>